<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <button @click="btn">按钮</button>
    </div>
    <button onclick="app.$destroy()">销毁</button>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    // 第一步
    const app = new Vue({
        el: '#app',
        data: {
            msg: '1'
        },
        methods: {
            btn() {
                this.msg++;
            }
        },
        beforeCreate() {
            console.log('1-beforeCreate 初始化之后');
        },
        created() {
            console.log('2-created 创建完成');
        },
        beforeMount() {
            console.log('3-beforeMount 挂载之前');
        },
        mounted() {
            console.log('4-mounted 被创建');
        },
        beforeUpdate() {
            console.log('5-beforeUpdate 数据更新前');
        },
        updated() {
            console.log('6-updated 被更新后');
        },
        activated() {
            console.log('7-activated 进入路由触发');
        },
        deactivated() {
            console.log('8-deactivated 离开路由触发');
        },
        beforeDestroy() {
            console.log('9-beforeDestroy 销毁之前');
        },
        destroyed() {
            console.log('10-destroyed 销毁之后')
        }
    });
    // 第二步
    // const app = new Vue({
    //     el: '#app',
    //     data: {
    //         msg: '1'
    //     },
    //     methods: {
    //         btn() {
    //             this.msg++;
    //         }
    //     },
    //     beforeCreate() {
    //         console.log('1-beforeCreate 初始化之后');
    //         console.log('el:');
    //         console.log(this.$el);
    //         console.log('data:');
    //         console.log(this.$data);
    //     },
    //     created() {
    //         console.log('2-created 创建完成');
    //         console.log('el:');
    //         console.log(this.$el);
    //         console.log('data:');
    //         console.log(this.$data);

    //     },
    //     beforeMount() {
    //         console.log('3-beforeMount 挂载之前');
    //         console.log('el:');
    //         console.log(this.$el);
    //         console.log('data:');
    //         console.log(this.$data);
    //     },
    //     mounted() {
    //         console.log('4-mounted 被创建');
    //         console.log('el:');
    //         console.log(this.$el);
    //         console.log('data:');
    //         console.log(this.$data);
    //     },
    // });
    // 第三步
    //  const app = new Vue({
    //     data: {
    //         msg: '1'
    //     },
    //     methods: {
    //         btn() {
    //             this.msg++;
    //         }
    //     },
    //     beforeCreate() {
    //         console.log('1-beforeCreate 初始化之后');
    //     },
    //     created() {
    //         console.log('2-created 创建完成');

    //     },
    //     beforeMount() {
    //         console.log('3-beforeMount 挂载之前');
    //     },
    //     mounted() {
    //         console.log('4-mounted 被创建');
    //     },
    // });

    // 第三步 2
    // const app = new Vue({
    //     data: {
    //         msg: '1'
    //     },
    //     methods: {
    //         btn() {
    //             this.msg++;
    //         }
    //     },
    //     beforeCreate() {
    //         console.log('1-beforeCreate 初始化之后');
    //     },
    //     created() {
    //         console.log('2-created 创建完成');

    //     },
    //     beforeMount() {
    //         console.log('3-beforeMount 挂载之前');
    //     },
    //     mounted() {
    //         console.log('4-mounted 被创建');
    //     },
    // });
    // app.$mount('#app');

    //第四步
    // const app = new Vue({
    //     el: '#app',
    //     data: {
    //         msg: '1'
    //     },
    //     methods: {
    //         btn() {
    //             this.msg++;
    //         }
    //     },
    //     beforeUpdate() {
    //         console.log('5-beforeUpdate 数据更新前');
    //         console.log('el:');
    //         console.log(this.$el);
    //         console.log('data:');
    //         console.log(this.$data);
    //     },
    //     updated() {
    //         console.log('6-updated 被更新后');
    //         console.log('el:');
    //         console.log(this.$el);
    //         console.log('data:');
    //         console.log(this.$data);
    //     },
    // });

    //第四步 2
    // const app = new Vue({
    //     el: '#app',
    //     data: {
    //         msg: '1'
    //     },
    //     methods: {
    //         btn() {
    //             this.msg++;
    //         }
    //     },
    //     beforeUpdate() {
    //         console.log('5-beforeUpdate 数据更新前');
    //         console.log('el:');
    //         console.log(this.$el);
    //         console.log('data:');
    //         console.log(this.$data);
    //         console.log('真实dom结构：');
    //         console.log(appId());
    //         console.log('-------------------------------------------');
    //     },
    //     updated() {
    //         console.log('6-updated 被更新后');
    //         console.log('el:');
    //         console.log(this.$el);
    //         console.log('data:');
    //         console.log(this.$data);
    //         console.log('真实dom结构：');
    //         console.log(appId());
    //         console.log('-------------------------------------------');
    //     },
    // });

    //第五步
    // const app = new Vue({
    //     el: '#app',
    //     data: {
    //         msg: '1'
    //     },
    //     methods: {
    //         btn() {
    //             this.msg++;
    //         }
    //     },
    //     beforeCreate() {
    //         console.log('1-beforeCreate 初始化之后');
    //     },
    //     created() {
    //         console.log('2-created 创建完成');
    //     },
    //     beforeMount() {
    //         console.log('3-beforeMount 挂载之前');
    //     },
    //     mounted() {
    //         console.log('4-mounted 被创建');
    //     },
    //     beforeUpdate() {
    //         console.log('5-beforeUpdate 数据更新前');
    //     },
    //     updated() {
    //         console.log('6-updated 被更新后');
    //     },
    //     activated() {
    //         console.log('7-activated 进入路由触发');
    //     },
    //     deactivated() {
    //         console.log('8-deactivated 离开路由触发');
    //     },
    //     beforeDestroy() {
    //         console.log('9-beforeDestroy 销毁之前');
    //     },
    //     destroyed() {
    //         console.log('10-destroyed 销毁之后')
    //     }
    // })

    // 真实dom
    function appId() {
        return document.getElementById('app').innerHTML
    }
</script>

</html>